<template>
	<div class="book">
		<img :src="books.cover" />
		<p>{{books.yearPeriod}}</p>
		<router-link :to="{path:'/magazine/catalog/'+books.id,query:books.id}">查看目录</router-link>
		<!-- <router-link v-for="n in 10" :to="{path:'/home/detail/'+n, query:n}">张{{n}}</router-link> -->
		
	</div>
</template>

<script>
	export default{
		name:'book',
		props:{
			books:{
				type:Object,
				default:null
			}
		}
	}
</script>

<style scoped>
	.book{
		margin: 30px 10px;
		text-align: center;
		width: 180px;
		height: 310px;
		
	}
	.book>img{
		box-shadow: 0 0 1px 3px rgb(245,245,240);
		width: 170px;
		height: 220px;
	}
	.book>p{
		margin: 5px 0px;
	}
	.book>a{
		text-decoration: none;
		color: gray;
	}
</style>
